<template>
  <div>
    <el-card lable-width="200px" :inline="true">
      <!-- 筛选表单区域 -->
      <el-form label-width="200px;" :inline="true" :model="items">
        <el-form-item label="标签名称" prop="tagName">
          <el-input
            size="small"
            v-model="items.tagName"
            placeholder="请根据文章标题搜索"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-select size="small" placeholder="请选择" v-model="items.state">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <!-- 查询区 -->
          <el-row :gutter="24">
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-search"
                  @click="initData"
                  >搜索</el-button
                >
              </div></el-col
            >
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                <el-button
                  size="small"
                  icon="el-icon-refreseh"
                  @click="resetBtn"
                  >重置</el-button
                >
              </div></el-col
            >
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-link type="primary" v-if="id" @click="$router.push('list')"
                  >返回学科</el-link
                >
              </div>
            </el-col>

            <el-col :span="6"
              ><div class="grid-content bg-purple">
                <el-button
                  type="success"
                  icon="el-icon-plus"
                  plain
                  size="small"
                  @click="showDialog = true"
                  >新增</el-button
                >
              </div></el-col
            >
          </el-row>
        </el-form-item>
        <el-row>
          <el-col :span="24"
            ><div class="grid-content bg-purple-dark">
              <el-tag
                icon="el-icon-warning-outline"
                style="width: 100%"
                type="info"
                >{{ `${counts}条记录` }}</el-tag
              >
            </div></el-col
          >
        </el-row>
        <!-- 表格区域 -->
        <el-table style="width: 200%" :data="list">
          <el-table-column
            label="序号"
            width="100"
            type="index"
          ></el-table-column>
          <el-table-column
            label="所属学科"
            width="200"
            prop="subjectName"
          ></el-table-column>
          <el-table-column
            label="标签名称"
            width="200"
            prop="tagName"
          ></el-table-column>
          <el-table-column
            label="创建者"
            width="200"
            prop="username"
          ></el-table-column>
          <el-table-column
            label="创建日期"
            width="260"
            prop="addDate"
          ></el-table-column>
          <el-table-column label="状态" width="200" prop="state">
            <template slot-scope="{ row }">
              <el-button type="text" disabled size="small">{{
                row.state === 1 ? "已启用" : "已禁用"
              }}</el-button>
            </template></el-table-column
          >
          <el-table-column label="操作" width="200" prop="state">
            <template slot-scope="{ row }">
              <el-button type="text" @click="start(row)">{{
                row.state === 0 ? "启用" : "禁用"
              }}</el-button>
              <el-button
                type="text"
                @click="edit(row)"
                :disabled="row.state === 1"
                >修改</el-button
              >
              <el-button
                type="text"
                @click="delBtn(row.id)"
                :disabled="row.state === 1"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="items.page"
          :page-sizes="[10, 9, 8]"
          :page-size="items.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
        >
        </el-pagination>
        <!-- -------------------------------------------------增删改查区域------------- -->
        <el-dialog title="新增标签" :visible.sync="showDialog">
          <el-form
            ref="form"
            v-if="showDialog"
            :model="formData"
            :rules="rules"
          >
            <el-form-item v-show="!id" prop="subjectID" label="所属学科">
              <el-select v-model="formData.subjectID" placeholder="请选择学科">
                <el-option
                  v-for="item in smiple"
                  :key="item.id"
                  :label="item.subjectName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="标签名称" prop="tagName" label-width="120px">
              <el-input
                autocomplete="off"
                v-model="formData.tagName"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="showDialog = false">取 消</el-button>
            <el-button type="primary" @click="btnOk">确 定</el-button>
          </div>
        </el-dialog>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {
  getTagsimpleApi,
  getTagsListApi,
  addTagsApi,
  getTagsdelApi,
  TagsListApi,
  getTagseditApi,
  tagsInfoApi,
} from "@/api/cmq";
import { getSubjectListApi } from "@/api/subjects";
export default {
  name: "Tags",
  data() {
    //新增标签查重
    const checkTaglistRepeat = async (rule, value, cb) => {
      //先找到左右的学科名称
      let { items } = await getTagsListApi({
        tagName: "",
        page: 1,
        pagesize: 10000,
      });
      //找到兄弟们,判断是否和兄弟们同名
      let isRepeat = false;
      isRepeat = items.some((val) => {
        return val.tagName === value;
      });
      isRepeat ? cb(new Error(`已经存在${value}这个标签名称`)) : cb();
    };
    return {
      list: [],
      showDialog: false,
      counts: 0,
      rules: {
        tagName: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
          { validator: checkTaglistRepeat, trigger: "blur" },
        ],
      },
      options: [
        {
          value: "0",
          // label: "已启用",
          label: "已禁用",
        },
        {
          value: "1",
          label: "已启用",
        },
      ],
      // tags
      items: {
        page: 1,
        pagesize: 10,
        // directoryName: "",
        // subjectID: "",
        tagName: "",
        // state: "",
      },
      // smiple
      smiple: [],
      formData: {
        subjectID: "",
        tagName: "",
        // tagName: "",
        // state: "",
      },
      // {
      //     tagName: this.formData.tagName,
      //     page: this.items.page,
      //     pagesize: this.items.pagesize,
      //     subjectID: this.$route.query.id,
      //     state: this.options.value,
      //   }
      del: {
        id: 1,
      },
      id: this.$route.query.id,
    };
  },
  mounted() {},
  created() {
    this.initData();
    this.init();
  },
  methods: {
    async initData() {
      if (this.id) {
        this.items.subjectID = this.id;
        let { items, counts } = await getTagsListApi(this.items);

        this.list = items;
        this.counts = counts;
      } else {
        let { items, counts } = await getTagsListApi(this.items);
        this.list = items;
        this.counts = counts;
      }
    },
    async init() {
      // let res = await getTagsimpleApi();
      // this.smiple = res;
      let { items } = await getSubjectListApi({
        // subjectName: "",
        page: 1,
        pagesize: 100,
      });
      this.smiple = items;
    },
    handleSizeChange(val) {
      this.items.pagesize = val;
      this.initData();
    },
    handleCurrentChange(val) {
      this.items.page = val;
      this.initData();
    },
    resetBtn() {
      this.items = {};
      this.initData();
    },
    async btnOk() {
      try {
        await this.$refs.form.validate();
      } catch (error) {
        return console.log(error);
      }
      if (this.formData.id) {
        await getTagseditApi(this.formData);
        this.$message.success("修改成功");
      } else {
        if (this.id) {
          let res = await TagsListApi(this.id);
          // console.log(res, "555555555555");
          await addTagsApi({
            tagName: this.formData.tagName,
            subjectID: parseInt(this.id),
          });
        } else {
          await addTagsApi({
            tagName: this.formData.tagName,
            subjectID: this.formData.subjectID,
          });
        }
      }
      this.$message.success("新增成功");

      this.showDialog = false;
      this.formData = {};
      this.initData();
    },
    // 删除
    async delBtn(id) {
      await this.$confirm("此操作讲永久删除该学科，是否继续？");
      await getTagsdelApi(id);
      this.$message.success("删除成功");
      if (this.items.page !== 1 && this.items.length === 1) {
        this.items.page--;
      }
      this.initData();
    },
    // 修改
    async edit(val) {
      let res = await TagsListApi(val.id);
      this.formData = res;
      this.showDialog = true;
    },
    // 状态
    async start(val) {
      // console.log(val.id);
      if (val.state === 1) {
        //开启
        val.state = 0;
      } else {
        val.state = 1;
      }
       await tagsInfoApi(
         val.id,
        val.state,
        
      );
      // 点击禁用的时候换成启用状态改为0，修改和删除高亮/反之为1启用变禁用，修改和删除不高亮
      this.$message.success("操作成功");
      // this.initData();
      // console.log(show);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  background-color: rgb(64, 158, 255);
}
::v-deep .el-dialog__title {
  color: #fff;
}
::v-deep .el-dialog__close {
  color: #fff;
}
</style>